<template>
  <div class="w-1/6 h-full p-2" style="color: #fff">
    <div :class="[
        item.status ? 'production' : 'powerOff',
        'rounded-xl',
        'w-full',
        'h-full',
        'card-box',
        'flex',
        'items-center',
        'justify-between'
      ]" >
      <div class="rounded-xl h-full flex flex-col justify-center pl-5" style="width: 75%">
        <div class="text-sm">
          {{ item.title }}
        </div>
        <div class="text-l font-bold">
          <span>{{ $t('tank.Weight')}}</span> <span>{{ item.content }}</span> <span>{{ item.unit }}</span>
        </div>

        <div class="text-l font-bold">
          <span>{{ $t('tank.dangrixiaohao')}}</span> <span>{{ item.outQty}}</span><span>{{ item.unit }}</span>
        </div>
        <div class="text-l font-bold">
          <span>{{ $t('tank.DRruku')}}</span> <span>{{ item.inQty}}</span><span>{{ item.unit }}</span>
        </div>
      </div>

      <div class="h-full flex items-center justify-center" style="width: 25%">
        <div class="page-title">
          <el-icon>
            <component :is="item.icon ? item.icon : Monitor" />
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import '@/assets/font/iconfont.css'
import { defineProps } from 'vue'
import { Monitor } from '@element-plus/icons-vue'


const props = defineProps({
  item: {
    type: Object,
    required: true
  },
})

</script>


<style scoped lang="scss">
.card-box{
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
}
.card-box:hover {
  box-shadow: 0 8px 24px rgba(60, 60, 60, 0.18);
  transform: scale(1.04);
  filter: brightness(1.05);
}
.powerOff {
  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
}

.production {
  background: linear-gradient(135deg, #67C23A 0%, #b3e19d 100%);
}
.page-title {
  font-size: 36px;
  color: white;
}
</style>
